import { useState, useEffect, useContext } from "react";
import { MINUTE, HOUR, DAY, UPDATE_INTERVAL } from "./App";
import AdminContext from "./context/AdminContext";

// 看板卡片
export default function KanbanCard({ title, status, onDragStart, onRemove }) {
  const [displayTime, setDisplayTime] = useState(status);
  const isAdmin = useContext(AdminContext)
  useEffect(() => {
    const updateDisplayTime = () => {
      const timePassed = new Date() - new Date(status);
      let relativeTime = '刚刚';
      if (MINUTE <= timePassed && timePassed < HOUR) {
        relativeTime = `${Math.ceil(timePassed / MINUTE)} 分钟前`;
      } else if (HOUR <= timePassed && timePassed < DAY) {
        relativeTime = `${Math.ceil(timePassed / HOUR)} 小时前`;
      } else if (DAY <= timePassed) {
        relativeTime = `${Math.ceil(timePassed / DAY)} 天前`;
      }
      setDisplayTime(relativeTime);
    };
    const intervalId = setInterval(updateDisplayTime, UPDATE_INTERVAL);
    updateDisplayTime();

    return function cleanup() {
      clearInterval(intervalId);
    };
  }, [status]);

  const handleDragStart = (evt) => {
    evt.dataTransfer.effectAllowed = 'move';
    evt.dataTransfer.setData('text/plabin', title);
    onDragStart && onDragStart(evt);
  };

  return (
    <li className="kanban-card" draggable onDragStart={handleDragStart}>
      <div className="card-title">{title}</div>
      <div className="card-status">{displayTime}
      {
        isAdmin && onRemove && (<button onClick={()=>onRemove({title})}>X</button>)
      }
      </div>
    </li>
  );
}
